<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <a-cascader disabled />
    </div>
    <div v-else>
      <a-cascader
        v-model="_value"
        path-mode
        :field-names="{
          label: 'name',
          value: 'cityCode'
        }"
        :allow-clear="$attrs.clearable"
        :options="areaCode"
        :disabled="$attrs.disabled"
        :placeholder="placeholder"
      ></a-cascader>
    </div>
  </div>
</template>

<script setup>
import { computed, useAttrs } from "vue";
import { isEmpty } from "lodash";
import areaCode from "@/assets/pca-code.js";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const $attrs = useAttrs();

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

if (isEmpty(_value.value) && !$attrs.disabled) {
  _value.value = $attrs.defaultValue;
}
</script>

<style scoped lang="scss">
:deep(.arco-select-view-single) {
  background-color: #f2f3f5 !important;
  width: 100% !important;
}
</style>
